<script setup>
	import {
		ref,
		onMounted,
	} from "vue";
	import {
		navigateBack,
		navigateToArticle,
	} from "@/assets/scripts/navigate.js"
	import {
		articleType2Api,
		articleList2Api,
	} from '@/assets/api/tarbar/home.js'
	import titleColumn from '@/components/titleColumn.vue'
	import articleCard from '@/components/articleCard.vue'

	const articleTabList = ref([])
	const articleList = ref([
		[],
		[],
		[],
	])
	const pageNum = ref([1, 1, 1])
	const total = ref([10, 10, 10])
	const loading = ref(true)
	const articleCurrent = ref(0)
	const swiperHeight = ref(315)
	const lineBg =
		"";

	const articleSwiper_handleChange = (event) => {
		articleCurrent.value = event.detail.current
	}
	const articleTab_handleChange = (event) => {
		articleCurrent.value = event.index
	}

	const handleMore = () => {
		if (loading.value) return
		loading.value = true
		pageNum.value[articleCurrent.value] = pageNum.value[articleCurrent.value] + 1
		articleList_init()
	}

	onMounted(async () => {
		await articleTabList_init()
		await articleList_init()
	})

	const articleTabList_init = async () => {
		const typeRes = await articleType2Api()
		if (typeRes.code !== 200) {
			return
		}
		articleTabList.value = typeRes.rows.map(item => {
			item.name = item.atName
			return item
		})
	}

	const articleList_init = async () => {
		for (let i = 0; i < articleTabList.value.length; i++) {
			const element = articleTabList.value[i]
			const res = await articleList2Api(element.id, pageNum.value[i])
			if (res.code === 200) {
				total.value[i] = res.total
				const rows = res.total <= (pageNum.value[i] - 1) * 10 ? [] : res.rows
				articleList.value[i] = [...articleList.value[i].slice(0, (pageNum.value[i] - 1) * 10), ...rows]
				loading.value = false
			}
		}
	}
</script>

<template>
	<view class="">
		<uv-navbar :fixed="false" bgColor="#f5f5f5" title="留言列表">
			<template v-slot:left>
				<view class="d-flex d-flex-aic" @click="navigateBack">
					<uv-icon name="arrow-left" size="19"></uv-icon>
					返回首页
				</view>
			</template>
		</uv-navbar>
		<uv-tabs :list="articleTabList" :current="articleCurrent" :scrollable="false" :lineHeight="10"
			:activeStyle="{transform:'scale(1.2)', color:'#111'}" :lineColor="`url(${lineBg}) no-repeat`"
			lineBgSize="100%" @change="articleTab_handleChange"></uv-tabs>
		<swiper class="mt-normal swiper" circular :indicatorDots="false" :current="articleCurrent"
			@change="articleSwiper_handleChange">
			<swiper-item v-for="(item, index) in articleList" :key="index">
				<scroll-view scroll-y="true" class="scroll-view">
					<uv-empty class="py-normal" mode="list" icon="empty-favor" style="background-color: #fff"
						v-if="!item.length"></uv-empty>
					<view class="swiper-item" v-for="(obj, jIndex) in item" :key="jIndex"
						@click="navigateToArticle(obj.id)">
						<articleCard :style="{'border-bottom-width':jIndex==item.length-1?'0':'1px'}" :data="obj">
						</articleCard>
					</view>
					<view class="pb-normal pl-normal pr-normal"
						v-if="!loading && total[articleCurrent] > pageNum[articleCurrent] * 10">
						<uv-button style="width: 100%;" type="success" text="查看更多" @click="handleMore"></uv-button>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<style lang="scss" scoped>
	.scroll-view {
		height: calc(100vh - 44px - 44px - 10px);
	}

	.swiper {
		height: calc(100vh - 44px - 44px - 10px);

		.swiper-item {
			height: 105px;
		}
	}
</style>